<template>
  <div class="comRNav">
    <van-nav-bar :title="title" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        <img src="../assets/classify/new-back.png" alt="">
      </template>
      <template #right v-if="rightButton">
        <img src="../assets/classify/ico-menu.png" alt="">
      </template>
    </van-nav-bar>
    <ul v-show="isShow">
      <li v-for="data in list" :key="data.id">
        <router-link :to="data.path" active-class="active" tag="div">
          <img :src="data.img">
          <p>{{data.name}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "comRNav",
  props: {
    //是否显示右边按钮
    rightButton: {
      type: Boolean,
      default: true
    },
    //页面名称
    title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isShow: false,
      list: [
        {
          path: "/index",
          name: "首页",
          img: require("../assets/classify/homec.png")
        },
        {
          path: "/classify",
          name: "分类",
          img: require("../assets/classify/class.png")
        },
        {
          path: "/shoppingCart",
          name: "购物车",
          img: require("../assets/classify/ico-shopcartc.png")
        },
        {
          path: "/mine",
          name: "我的优购",
          img: require("../assets/classify/ico-personc.png")
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      if (this.rightButton) {
        this.isShow = !this.isShow;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../assets/comRNav/iconfont.css);
.comRNav {
  width: 100%;
  ul {
    background-color: #666666;
    width: 100%;
    height: 53px;
    display: flex;
    align-items: center;
    text-align: center;
    li {
      width: 25%;
      img {
        width: 20px;
        height: 20px;
        margin: 2px 0 -3px 0px;
      }
      p {
        font-size: 14px;
        color: #ededed;
      }
    }
  }
  ::v-deep .van-nav-bar {
    height: 46px;
    background-color: #f8f8f8;
    .van-nav-bar__title {
      font-size: 17px;
    }
    .van-nav-bar__left {
      width: 14px;
      height: 25px;
      img {
        width: 100%;
        height: 100%;
        margin-top: 24px;
      }
    }
    .van-nav-bar__right {
      width: 25px;
      height: 21px;
      img {
        width: 100%;
        height: 100%;
        margin-top: 24px;
      }
    }
  }
}
.active {
  background-color: #555555;
  height: 52px;
  padding-top: 5px;
  box-sizing: border-box;
}
</style>